<!--
 * 模板
 * @author luguoxiang
 * @date 2025-03-03
 * 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <page-split>
    <template #left>
      <div class="gl-card gl-pd0" style="margin: 0 calc(0 - var(--app-space-horizontal))">
        <div class="gl-card-title gl-flex">
          <div class="gl-flex-1">分组</div>
          <t-link v-if="has('create')" @click="groupEditRef.open({ status: 0 })">添加</t-link>
        </div>
        <div class="gl-card-body gl-pd0">
          <t-list split>
            <t-list-item
              v-for="x in groupList"
              :key="x.id"
              :class="{ active: group.id === x.id }"
              @click="changeGroup(x)"
            >
              {{ x.name }}
              <template v-if="x.id !== '0'" #action>
                <t-link
                  v-if="has('update')"
                  theme="primary"
                  hover="color"
                  style="margin-left: 16px"
                  @click="groupEditRef.open(x)"
                >
                  编辑
                </t-link>
                <t-link
                  v-if="has('remove')"
                  theme="danger"
                  hover="color"
                  style="margin-left: 16px"
                  @click="removeGroup(x)"
                >
                  删除
                </t-link>
              </template>
            </t-list-item>
          </t-list>
        </div>
      </div>
    </template>
    <lg-table :schema="schema" v-bind="tableProps">
      <!-- 工具栏 -->
      <template #toolbar-left>
        <lg-button-list :limit="$ToolBtnLimit">
          <btn-tool-add v-if="has('create')" @click="editRef.open({ status: 0, groupId: 0 })" />
          <btn-tool-remove v-if="has('remove')" @click="remove()" />
          <btn-tool-export v-if="has('export')" @click="exports" />
          <btn-tool-import v-if="has('import')" @click="imports" />
          <t-button v-if="has('clear-cache')" theme="default" title="清空数据缓存" @click="clearCache">
            清空缓存
          </t-button>
          <template #trigger><btn-tool-more /></template>
        </lg-button-list>
      </template>
      <!-- 操作栏 -->
      <template #actionbar="{ row }">
        <lg-button-list :limit="$RowBtnLimit">
          <btn-row-update v-if="has('update')" @click="editRef.open({ id: row.id })" />
          <btn-row-view v-if="has('detail')" @click="detailRef.open(row)" />
          <btn-row-remove v-if="has('remove')" @click="remove(row.id)" />
        </lg-button-list>
      </template>
      <!-- 插槽 -->
    </lg-table>
  </page-split>
  <edit ref="editRef" @ok="reload()" />
  <detail ref="detailRef" />
  <group-edit ref="groupEditRef" @ok="loadGroup" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { LgButtonList, LgTable, useAuth, useTable } from '@/soar';
import groupApi from './group/api';
import api from './api';
import schema from './schema';
import Edit from './Edit.vue';
import Detail from './Detail.vue';
import GroupEdit from './group/Edit.vue';
import PageSplit from '@/components/PageSplit/index.vue';

const { has } = useAuth();
const editRef = ref();
const detailRef = ref();

// 使用表格
const { exports, imports, remove, reload, tableProps, handleSingle } = useTable<any>({
  api: {
    ...api,
    query(params: any) {
      params.$soarQuery['groupId-eq'] = group.value.id;
      return api.query(params);
    },
  },
  props: {
    orderBys: ['id'],
    actionbar: {
      width: 100,
    },
  },
});

const groupEditRef = ref();
const group = ref({});
const groupList = ref([]);
function loadGroup() {
  groupApi
    .query({
      $soarQuery: {
        fields: 'id,name',
        orderBys: 'sort',
      },
    })
    .then((res: any) => {
      res.list.unshift({ id: '0', name: '默认' });
      res.list.unshift({ id: '', name: '全部' });
      groupList.value = res.list;
    });
}
loadGroup();

function changeGroup(e: string) {
  if (e === group.value) {
    return;
  }
  group.value = e;
  reload(1);
}

function removeGroup(e: { name: any; id: string | number }) {
  handleSingle(`确认删除“${e.name}”吗？`, () => {
    groupApi.remove([e.id]).then(() => loadGroup());
  });
}

function clearCache() {
  api.clearCache();
}
</script>
<style lang="less" scoped>
.active {
  background-color: var(--td-brand-color-1);
  color: var(--app-color-primary);
}
:deep(.t-list-item) {
  cursor: pointer;
  .t-list-item__action {
    display: none;
  }
  &:hover {
    .t-list-item__action {
      display: unset;
    }
  }
}
</style>
